<template>
  <div style="display: flex; flex-direction: column; height: 100%">
    <SearchList>
      <template #left>
        <div class="status-list">
          <div style="color: #165dff">
            <span>全部</span>
            <span>761</span>
          </div>
          <div>
            <span>已完成</span>
            <span style="color: rgb(3 198 131)">461</span>
          </div>
          <div>
            <span>待完成</span>
            <span style="color: rgb(255 160 54)">238</span>
          </div>
          <div>
            <span>待确认</span>
            <span style="color: #fb4246">62</span>
          </div>
        </div>
      </template>
      <!-- <GenerateData /> -->
      <a-button size="small" type="primary">
        新建
      </a-button>
    </SearchList>
    <!-- <BoliTabel :columns="columns" :api="tableData">
      <template #action>
        <div>...</div>
      </template>
    </BoliTabel> -->
  </div>
</template>

<script setup>
// import GenerateData from './GenerateData.vue'

defineOptions({
  name: 'DispatchOutstorage',
})
</script>

<style lang="less" scoped>
.status-list {
  display: flex;
  align-items: center;
  height: 100%;

  & > div {
    margin-right: 20px;
    font-size: 14px;
    color: #111;

    & span {
      margin-right: 5px;
    }
  }
}

.batch-btns {
  margin-right: 10px;

  .choose-btn {
    height: 30px;
    padding: 0 8px;
    font-size: 14px;
    line-height: 30px;
    color: #575757;
    cursor: pointer;
    background: #f2f5f7;
    border-radius: 4px;
  }
}
</style>
